<script setup>
import { ElButton, ElRow, ElCol, ElInputNumber } from 'element-plus'
import { useDeviceStore } from '../stores/device'

const devices = useDeviceStore()

const defaultShowText = '- -'

const formatter = (num) => {
    if (num < 0) {
        return defaultShowText
    }
    return num
}
</script>

<template>
    <el-row class="mt20 score-area">
        <el-col :span="6" class="score">
            <h2>平均分</h2>
            <div class="score-value">{{ formatter(devices.avgScore) }}</div>
        </el-col>
        <el-col :span="6" class="score">
            <h2>总分</h2>
            <div class="score-value">{{ formatter(devices.sumScore) }}</div>
        </el-col>
        <el-col :span="6" class="score">
            <h2>最高分</h2>
            <div class="score-value">{{ formatter(devices.maxScore) }}</div>
        </el-col>
        <el-col :span="6" class="score">
            <h2>最低分</h2>
            <div class="score-value">{{ formatter(devices.minScore) }}</div>
        </el-col>
    </el-row>
</template>

<style scoped>
.score-area {
    margin-top: 50px;
}

.score {
    text-align: center;
    border-right: 1px solid #ebeef5;
}

.score:last-child {
    border-right: none;
}

.score-value {
    margin-top: 30px;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    color: #409eff;
}
</style>
